<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" th:href="@{/admin/bootstrap4/css/bootstrap.css}">
    <script th:src="@{/admin/bootstrap4/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/admin/bootstrap4/js/bootstrap.js}"></script>

</head>

<body>
<br>
<div style="width:80%;height: 600px;margin-left:10% ;">

    <form th:action="@{/admin/search}" method="get">
        <div class="form-row align-items-center">
            <div class="col-auto">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <div class="input-group-text">查找用户</div>
                    </div>
                    <input type="text" class="form-control" placeholder="查找..." aria-label="Recipient's username" aria-describedby="button-addon2" name="key">
                    <div class="input-group-append">
                         <button class="btn btn-outline-secondary" type="submit" id="button-addon2">查找</button>
                    </div>
                    </div>
                    <span class="badge badge-warning">[[${msg}]]</span>
                </div>
            </div>
    </form>

    <table class="table">
        <thead class="bg-dark" style="color: white">
        <tr>
            <th scope="col">用户ID</th>
            <th scope="col">账户</th>
            <th scope="col">昵称</th>
            <th scope="col">性别</th>
            <th scope="col">邮箱</th>
            <th scope="col">头像</th>
            <th scope="col">角色</th>
            <th scope="col">状态</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user:${userList}" class="text-center my-auto mx-auto">
            <th scope="row">[[${user.userId}]]</th>
            <td>[[${user.userName}]]</td>
            <td>[[${user.userNickname}]]</td>
            <td>[[${user.userGender}]]</td>
            <td>[[${user.userEmail}]]</td>
            <td><img th:src="${user.userHeadphoto}" alt="null" style="width: 40px;height: 40px;" class="rounded-circle"></td>
            <td th:if="${user.userRole == 1}">普通用户</td>
            <td th:if="${user.userRole == 0}">会员用户</td>
            <td th:if="${user.userIsdelete == 0}"><span class="badge badge-success">正常</span></td>
            <td th:if="${user.userIsdelete == 1}"><span class="badge badge-danger">禁用</span></td>
            <td>
                <a type="button" class="btn btn-success" th:if="${user.userIsdelete == 1}" th:href="@{/admin/cancelBanUser(id=${user.userId},currentIndex=${currentIndex})}">解禁</a>
                <a type="button" class="btn btn-danger" th:if="${user.userIsdelete == 0}" th:href="@{/admin/banUser(id=${user.userId},currentIndex=${currentIndex})}">禁用</a>
                <a type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalId" th:onclick="test([[${user.userId}]],[[${user.userName}]],[[${user.userPwd}]],[[${user.userNickname}]],[[${user.userEmail}]],[[${user.userPhone}]],[[${currentIndex}]])">修改</a>
            </td>
        </tr>
        </tbody>
    </table>
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" th:href="@{/admin/userList(currentIndex=${currentIndex-1})}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">第[[${currentIndex}]]页</a></li>
            <li class="page-item"><a class="page-link" href="#">共[[${page.getPages()}]]页</a></li>
            <li class="page-item">
                <a class="page-link" th:href="@{/admin/userList(currentIndex=${currentIndex+1})}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

    <!-- 文件信息展示-弹窗 -->
    <div class="modal fade" id="ModalId" tabindex="-1" role="dialog"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×</button>
                </div>
                    <div class="modal-body">
                        <!-- 内容主体begin -->
                        <form id="myform" th:action="@{/admin/modUser}" method="post">
                        <input type="hidden" name="userid">
                        <input type="hidden" name="currentindex">
                        <div class="input-group input-group-sm mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-sm">用户账户</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" name="username">
                        </div>
                        <div class="input-group input-group-sm mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">用户密码</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" name="userpassword">
                        </div>
                        <div class="input-group input-group-sm mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">用户昵称</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" name="usernickname">
                        </div>
                        <div class="input-group input-group-sm mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">用户邮箱</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" name="useremail">
                        </div>
                        <div class="input-group input-group-sm mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">用户电话</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" name="userphone">
                        </div>
                    </form>
                        <!-- 内容主体end -->
                    </div>
                    <div class="modal-footer">
                        <button form="myform" type="submit" class="btn btn-primary" id="ModalYesId">提交</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>

            </div>
        </div>
</div>
</div>
</body>
<script>

    function test(userid,username,userpassword,usernickname,useremail,userphone,currentindex){
        // console.log(username,userpassword,usernickname,useremail,userphone,currentindex)
        $("[name='userid']").attr("value",userid)
        $("[name='username']").attr("value",username)
        $("[name='userpassword']").attr("value",userpassword)
        $("[name='usernickname']").attr("value",usernickname)
        $("[name='useremail']").attr("value",useremail)
        $("[name='userphone']").attr("value",userphone)
        $("[name='currentindex']").attr("value",currentindex)
    }
</script>
</html>